<template>
	<view class="container">
		<uni-nav-bar class="ch-nav" height="88rpx" :backgroundColor="navBgColor" leftWidth="90rpx" rightWidth="90rpx" color="#FFFFFF" :fixed="true" :padding="false" :border="navBorder" @clickLeft="$goBack(1)">
			<template slot="left">
				<image class="left" :src="!isBlack ? require('@/public/images/public/dhl_fhb.png') : require('@/public/images/public/dhl_fhjt.png')" mode="aspectFit"></image>
			</template>
			<text class="title" :class="isBlack ? 'color-black' : 'color-white'" v-if="expert">{{expert.expertName}}的次卡</text>
		</uni-nav-bar>
		<view class="body" v-if="expert">
			<view class="card expert flex-r">
				<view class="expert-avatar flex-c" @tap="$CHS.goExpertHome(expert.expertId)">
					<lazy-image class="image border-round" :src="expert.expertAvatar+'?imageView2/1/w/100/h/100/q/50'" type="expert" fit="cover"></lazy-image>
					<button v-if="expert.followStatus == 1" class="fav" :class="{'nochat': expert.userIdentity != 1}" size="mini" @tap.stop="$CHS.goChat(expert.expertId, expert.userIdentity)">私信</button>
					<button v-else size="mini" @tap.stop="favExpert(expert.expertId)">关注</button>
				</view>
				<view class="expert-info flex-c">
					<view class="info-top flex-r">
						<view class="flex-c">
							<view class="info-top-name flex-r">
								<text>{{expert.expertName}}</text>
								<image v-if="expert.cardFlag == 1" src="@/public/images/public/y@1x.png" mode="aspectFit"></image>
							</view>
							<view class="info-top-tag flex-r">
								<text class="tag-blue ml20" v-if="expert.expertTag">{{expert.expertTag}}</text>
								<text class="tag-red ml20" v-if="expert.hotContineTxt">{{expert.hotContineTxt}}</text>
								<text class="tag-gold ml20" v-else-if="expert.hitResultTxt">{{expert.hitResultTxt}}</text>
							</view>
						</view>
						<view class="author-result-score flex-c" v-if="Number(expert.hitRate)>=60">
							<view class="result-score flex-r">
								<text>{{expert.hitRate}}</text>
								<text>%</text>
							</view>
							<text class="result-des color-red">{{expert.hitRateName}}</text>
						</view>
					</view>
					<text class="info-remark" v-if="expert.remark">
						{{expert.remark}}
					</text>
					<text class="info-season" v-if="expert.expertSeasonTag && expert.expertSeasonTag.adaptSeasonTag">
						擅长联赛：{{expert.expertSeasonTag.adaptSeasonTag.replace(/,/g, '、')}}
					</text>
				</view>
			</view>
			<view class="card rights flex-c">
				<image class="title-img" src="@/public/images/expert/cktq.png" mode="widthFix"></image>
				<view class="rights-list flex-r">
					<view class="list-item flex-c ac">
						<image class="item-icon" src="@/public/images/expert/gkxyh.png" mode="aspectFit"></image>
						<text class="item-title">购卡解锁享优惠</text>
						<view class="item-desc">
							<text class="color-yellow">10</text>
							<text>次/卡享</text>
							<text class="color-yellow">9</text>
							<text>折，</text>
							<text class="color-yellow">30次\n</text>
							<text>/卡享</text>
							<text class="color-yellow">85</text>
							<text>折，</text>
							<text class="color-yellow">100</text>
							<text>次/\n卡享</text>
							<text class="color-yellow">8</text>
							<text>折；</text>
						</view>
					</view>
					<view class="list-item flex-c ac">
						<image class="item-icon" src="@/public/images/expert/famfjs.png" mode="aspectFit"></image>
						<text class="item-title">方案免费解锁</text>
						<view class="item-desc">
							<text>不限方案类型，</text>
							<text class="color-yellow">同价\n位及以下</text>
							<text>皆可解锁；</text>
						</view>
					</view>
					<view class="list-item flex-c ac">
						<image class="item-icon" src="@/public/images/expert/bxs.png" mode="aspectFit"></image>
						<text class="item-title">次卡不限时</text>
						<view class="item-desc">
							<text>次卡不限定到期时\n间，</text>
							<text class="color-yellow">用完为止</text>
							<text>。</text>
						</view>
					</view>
				</view>
			</view>
			<view class="card cardlist flex-c" v-if="cardList">
				<image class="title-img" src="@/public/images/expert/dgck.png" mode="widthFix"></image>
				<view class="numcard flex-c" v-for="(numcard, indexs) in cardList" :key="numcard.id">
					<view class="card-title">
						<text>{{numcard.title}}</text>
					</view>
					<view class="card-price flex-r">
						<text class="color-red">{{numcard.cardBean}}</text><text>彩虹豆/次</text>
					</view>
					<view class="card-list flex-r">
						<template v-for="(card, index) in numcard.numCardInfoList">
							<view class="card-detail flex-c" :class="{'active': select[0]==indexs && select[1]==index}" :key="index" @tap="selectNumCard(indexs, index)">
								<text class="card-nums">{{card.cardNum}}次</text>
								<view class="card-info flex-c ac jc">
									<text class="color-red">{{card.saleBean}}</text>
									<text class="color-black">彩虹豆 (折扣后)</text>
									<text class="color-grey delete">{{ card.totalBean }}彩虹豆</text>
									<text class="discount" v-if="card.sale">{{ card.sale * (10 ** String(card.sale).split(".")[1].length) }}折</text>
								</view>
								<image class="select-icon" src="@/public/images/expert/n_gx.png" mode="aspectFit" v-if="select[0]==indexs && select[1]==index"></image>
								<image class="select-icon" src="@/public/images/expert/n_wgx.png" mode="aspectFit" v-else></image>
							</view>
						</template>
					</view>
				</view>
			</view>
		</view>
		<view class="foot" :class="{'full-screen': isPaying}" :style="windowHeight" v-if="cardList[select[0]]">
			<view class="post-foot bottom-ios flex-c" v-if="!isPaying">
				<view class="agreement flex-r" @tap="isAgree=true">
					<image v-show="!isAgree" src="@/public/images/expert/xywgx.png" class="radio"></image>
					<image v-show="isAgree" src="@/public/images/expert/xygx.png" class="radio"></image>
					<text class="color-grey">我已阅读并接受</text>
					<text class="color-blue" @tap.stop="$goByName('agreement', {name: 'subscribe', src: 'http://www.caihongsport.com:8888/subscribe.html'})">《专家优享订阅服务协议》</text>
				</view>
				<view class="pay-box flex-r">
					<view class="pay-price flex-r">
						<text>需支付:</text>
						<text class="color-red price">{{price}}</text>
						<text class="color-red">彩虹豆</text>
					</view>
					<button class="pay-btn" @tap="goPay">立即支付</button>
				</view>
			</view>
			<view class="post-foot bottom-ios radius" v-else>
				<view class="post-foot-result flex-c" v-if="payResult != 0">
					<view class="pay-head flex-r">
						<text class="des"></text>
						<text>支付结果</text>
						<view class="des" @tap="reload(payResult)">
							<image src="@/public/images/public/qxan.png" mode="aspectFit"></image>
						</view>
					</view>
					<view class="pay-body flex-c">
						<view class="pay-body-result flex-c" v-if="payResult == 1">
							<image src="@/public/images/public/zfcg.png" mode="aspectFit"></image>
							<text class="title">支付成功</text>
							<text class="reson" v-if="price && price > 0">支付{{price}}彩虹豆</text>
						</view>
						<view class="pay-body-result flex-c" v-else>
							<image src="@/public/images/public/zfsb.png" mode="aspectFit"></image>
							<text class="title">支付失败</text>
							<text class="reson">{{errorMsg}}</text>
						</view>
					</view>
					<view class="pay-result-btn">
						<button type="default" @tap="$goByName('orderlist', {tab: 1})" v-if="payResult == 1">查看购卡记录</button>
						<button type="default" @tap="goRecharge" v-if="payResult == 2">去充值</button>
						<button type="default" @tap="repeatBuy" v-if="payResult == 3">重新支付</button>
					</view>
				</view>
				<view class="post-foot-pay flex-c" v-else-if="!inputPassword">
					<view class="pay-head flex-r">
						<text class="des"></text>
						<text>确认支付</text>
						<view class="des" @tap="cancelPay">
							<image src="@/public/images/public/qxan.png" mode="aspectFit"></image>
						</view>
					</view>
					<view class="pay-body flex-c">
						<view class="pay-body-price flex-r">
							<text class="price">{{price}}</text>
							<image class="chd" src="@/public/images/public/shd_d.png" mode="aspectFit"></image>
						</view>
						<view class="pay-body-des mt30">
							<text>需支付彩虹豆</text>
							<view class="mt20">
								<text class="color-grey">余额：</text>
								<text class="color-red">{{user.chBean}}</text>
								<text class="color-grey">彩虹豆</text>
							</view>
						</view>
						<view class="pay-body-coupon flex-r">
							<text class="coupon-des">彩虹豆充值</text>
							<text class="coupon-info" @tap="goRecharge">去充值</text>
							<uni-icons class="coupon-icon" type="arrowright" color="#999999" size="28rpx"></uni-icons>
						</view>
						<view class="pay-body-agreement flex-r" id="agreement" @tap="isAgreeBuy=true">
							<image v-show="!isAgreeBuy" src="@/public/images/user/cz_wxz.png" class="radio"></image>
							<image v-show="isAgreeBuy" src="@/public/images/user/cz_xz.png" class="radio"></image>
							<text class="des color-grey">我已阅读并接受</text>
							<text class="color-blue" @tap.stop="$CHS.goAbout('service')">《彩虹体育服务条款》</text>
						</view>
					</view>
					<view class="pay-btn">
						<button type="default" @tap="confirmPay">立即支付</button>
					</view>
				</view>
				<view class="post-foot-password" v-else-if="!setPassword">
					<view class="pay-head flex-r">
						<text class="des" @tap="cancelPay">取消</text>
						<text>密码支付</text>
						<text class="des color-blue" @tap="submitPay">确定</text>
					</view>
					<view class="pay-body flex-c">
						<view class="pay-body-des color-grey">
							<text>请输入您的6位支付密码</text>
						</view>
						<view class="pay-body-password flex-c">
							<PassWord :input_value="payPwd"></PassWord>
							<text class="color-blue" @tap="$goByName('resetpassword')">忘记密码</text>
						</view>
						<view class="keyboard">
							<KeyBoard @input="inputPW"></KeyBoard>
						</view>
					</view>
				</view>
				<view class="post-foot-password" v-else-if="setPwdStep == 1">
					<view class="pay-head flex-r">
						<text class="des" @tap="cancelPay">取消</text>
						<text>设置支付密码</text>
						<text class="des color-blue" @tap="setPayPwd">下一步</text>
					</view>
					<view class="pay-body flex-c">
						<view class="pay-body-des flex-c color-grey">
							<text>请输入6位数字密码用于彩虹豆支付</text>
						</view>
						<view class="pay-body-password">
							<PassWord :input_value="payPwd"></PassWord>
						</view>
						<view class="keyboard">
							<KeyBoard @input="inputNewPW"></KeyBoard>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				expert: null,
				userCard: null,
				cardList: [],
				select: [0,0],
				renewNums: 1,
				isAgree: false,
				isAgreeBuy: false,
				isPaying: false,
				payPwd: null, //临时记录支付密码
				payResult: 0, //记录支付结果
				inputPassword: false, //是否处于输入密码状态
				setPassword: false, //是否处于设置密码状态
				setPwdStep: 0, //记录支付密码进度
				errorMsg: '网络异常，请检查您的网络设置', //支付错误信息
				
				isBlack: false,
				navBorder: false,
				navBgColor: 'rgba(255,255,255,0)',
				height: 0
			};
		},
		components:{
			PassWord: () => import('@/components/ch-password/ch-password.vue'),
			KeyBoard: () => import('@/components/ch-keyboard/ch-keyboard.vue')
		},
		computed: {
			user() {//用户信息
				return this.$store.state.user
			},
			selectCard() {
				if(this.cardList[0]){
					return this.cardList[this.select[0]]
				}else{
					return []
				}
			},
			price() {
				if(this.cardList[0]){
					return this.cardList[this.select[0]].numCardInfoList[this.select[1]].saleBean
				}else{
					return 0
				}
			},
			windowHeight() {
				return `--window-height:${this.height}px;`;
			}
		},
		onLoad(e) {
			if(this.$Route.query.eid){
				this.expertId = this.$Route.query.eid
				this.getExpertInfo(this.expertId)
			}else{
				console.log('非法请求');
				uni.showModal({
					title: '错误提示',
					content: '数据请求错误，请返回重试',
					showCancel: false,
					success: (res) => {
						if(res.confirm){
							this.$Router.pushTab({name: 'index'})
						}
					}
				})
			}
		},
		onShow() {
			this.height = uni.getSystemInfoSync().windowHeight
			this.windowResizeCallback = (res) => {
				this.height = res.size.windowHeight
			}
			uni.onWindowResize(this.windowResizeCallback)
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
			if(this.timer){
				return false
			}
			this.timer = setTimeout(()=>{
				this.setNavBgColor()
				this.timer = null
			}, 50);
		},
		onHide() {
			if(this.windowResizeCallback){
				uni.offWindowResize(this.windowResizeCallback)
				this.windowResizeCallback = null
			}
		},
		onUnload() {
			if(this.windowResizeCallback){
				uni.offWindowResize(this.windowResizeCallback)
				this.windowResizeCallback = null
			}
		},
		methods: {
			//刷新数据
			refresh() {
				this.cancelPay();
				this.getExpertInfo(this.expertId);
			},
			//选择次数卡
			selectNumCard(indexs, index) {
				this.select = [indexs, index]
			},
			//开始支付
			goPay(){
				if(this.selectCard.id){
					if(this.isAgree){
						this.isPaying = true
						/*
						if(!this.userCard || (this.userCard.cardType == 1 && this.cardList[this.select].cardType == 1)){
							this.isPaying = true
						}else{
							uni.showToast({
								title: '您已订购优享卡，请到期后再订购',
								icon: 'none'
							})
						} */
					}else{
						uni.showToast({
							title: '请阅读并接受专家优享订阅服务协议',
							icon: 'none'
						})
					}
				}else{
					uni.showToast({
						title: '请选择次卡套餐',
						icon: 'none'
					})
				}
			},
			//取消支付
			cancelPay() {
				this.isPaying = false
				this.isAgreeBuy = false
				this.inputPassword = false
				this.setPassword = false
				this.setPwdStep = 0
				this.payPwd = null
				this.payResult = 0
			},
			//确认支付
			confirmPay() {
				//检测余额
				if(this.user.chBean < this.price){
					uni.showModal({
						title: '支付提示',
						content: '您的彩虹豆余额已不足，请充值后再购买，是否立即充值？',
						success: (res) => {
							if(res.confirm){
								this.goRecharge()
							}
						}
					})
					return
				}
				if(this.isAgreeBuy){
					if(this.user.payPwd){
						this.inputPassword = true
					}else{
						this.inputPassword = true
						this.setPassword = true
						this.setPwdStep = 1
						uni.showToast({
							title: '请设置支付密码',
							icon: 'none'
						})
					}
				}else{
					uni.showToast({
						title: '请阅读并接受彩虹体育服务条款',
						icon: 'none'
					})
				}
			},
			//提交支付
			submitPay(){
				if(this.isSubmit) {
					return 
				}
				if(this.payPwd && this.payPwd.length == 6){
					//防重复
					this.isSubmit = true
					//支付
					this.$http.post({
						url: '/api/userPayRecord/payExpertNumCardByBean',
						data: {
							cardId: this.selectCard.id,
							cardNum: this.selectCard.numCardInfoList[this.select[1]].cardNum,
							expertId: this.expertId,
							payAmount: this.price,
							payPwd: this.payPwd,
							recordType: 'pay_num_card',
							userId: this.user.userId,
						}
					}).then(data => {
						console.log(data);
						this.isSubmit = false
						if(data.success){
							uni.showToast({
								title: data.message || '支付成功',
								icon: 'success'
							})
							this.payResult = 1
							this.$store.dispatch('updateUserinfo')
						}else{
							uni.showToast({
								title: data.message || '支付失败',
								icon: 'none'
							})
							if(data.code == 10025){
								this.payResult = 2
								this.errorMsg = '余额不足，快去充值吧～'
							}else{
								this.payResult = 3
								this.errorMsg = data.message || '支付失败，请重新支付'
							}
						}
					}).catch((err) => {
						console.log(err);
						uni.showToast({
							title: '支付失败',
							icon: 'none'
						})
						this.payResult = 3
						this.errorMsg = '网络异常，请检查您的网络设置'
						this.isSubmit = false
					})
				}else{
					uni.showToast({
						title: '请输入6位支付密码',
						icon: 'none'
					})
				}
			},
			//输入月数回调
			inputNums(value){
				let num = this.renewNums + value
				if(num >= 1){
					this.renewNums = num
				}else{
					uni.showToast({
						title: '续费月数不能小于1',
						icon: 'none'
					})
				}
			},
			//输入支付密码回调
			inputPW(pw) {
				console.log(pw);
				this.payPwd = pw
			},
			//设置新密码回调
			inputNewPW(pw) {
				console.log(pw);
				if(this.setPwdStep == 1){
					this.payPwd = pw
					if(this.payPwd && this.payPwd.length == 6){
						uni.showToast({
							title: '请进行下一步',
							icon: 'none'
						})
					}
				}
			},
			//提交新支付密码
			setPayPwd() {
				if(this.setPwdStep == 1 && this.payPwd && this.payPwd.length == 6){
					if(this.isSubmit) {
						return
					}
					this.isSubmit = true
					let userPwdModel = {
						newPayPwd: this.payPwd,
						userId: this.user.userId,
					}
					this.$http.post({
						url: '/api/appUser/setPayPwd',
						data: {
							...userPwdModel
						},
					}).then(data => {
						console.log(data);
						this.isSubmit = false
						if(data.success){
							this.$store.commit('UPDATE_USERINFO', {payPwd: 1})
							this.$ShowToast({text: '支付密码设置成功'})
							
							this.inputPassword = false
							this.setPassword = false
							this.setPwdStep = 0
							this.payPwd = null

							uni.showToast({
								title: '密码设置成功',
								icon: 'success'
							})
						}else{
							uni.showToast({
								title: data.message,
								icon: 'none'
							})
						}
					}).catch((err) => {
						console.log(err);
						this.isSubmit = false
						uni.showToast({
							title: '密码设置失败',
							icon: 'error'
						})
					})
				}
			},
			//支付成功后刷新页面
			reload(payResult) {
				if(payResult == 1){
					let pages = getCurrentPages()
					let len = pages.length
					if(len > 1){
						let page = pages[len - 2]
						console.log(page);
						if(page && page.refresh){
							page.refresh()
						}
						this.$Router.back(1);
						return
					}
				}
				this.refresh();
			},
			//支付失败后重新购买
			repeatBuy() {
				this.payPwd = null
				this.isPaying = false
				this.inputPassword = false
				this.setPassword = false
				this.payResult = 0
				this.goPay()
			},
			//去充值
			goRecharge() {
				this.$CHS.goRecharge({type: 'numcard', id: this.expertId})
			},
			//专家信息
			getExpertInfo(expertId) {
				this.$http.get({
					url: '/api/user/article/exportInfo',
					data: {
						expertId
					}
				}).then(data => {
					console.log(data);
					if(data.success && data.result){
						this.expert = data.result
						//this.getUserCard(expertId)
						this.getExpertCard(expertId)
					}else{
						this.$ShowToast({text: data.message || '专家数据加载失败', type: 2, time: 3})
						setTimeout(()=>{
							this.$goBack(1)
						}, 1000)
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//专家的优享卡
			getExpertCard(expertId) {
				this.$http.get({
					url: '/api/card/queryExpertNumCardRows',
					data: {
						expertId
					}
				}).then((data)=>{
					console.log(data);
					if(data.success && data.result && data.result[0]){
						this.cardList = data.result
					}else{
						this.$ShowToast({text: '该专家没有开通次卡', type: 2, time: 3})
					}
				})
			},
			//持有的优享卡
			getUserCard(expertId) {
				this.$http.get({
					url: '/api/appUser/user/card',
					data: {
						expertId
					}
				}).then((data)=>{
					console.log(data);
					if(data.success && data.result){
						this.userCard = data.result
					}
				})
			},
			//关注专家
			favExpert(eid) {
				if(!this.$store.state.isLogin){
					this.$CHS.goUserLogin()
					return
				}
				if(eid === this.isFaving){ //防止重复提交
					return
				}else{
					this.isFaving = eid
					this.$CHS.favExpert(eid).then( res => {
						console.log(res);
						this.expert.followStatus = 1
					}).catch(err => {
						console.log(err);
					}).finally(()=>{
						this.isFaving = null
					})
				}
			},
			//设置导航区域背景色
			setNavBgColor() {
				let scrollTop = this.scrollTop
				if(scrollTop > 10){
					this.navBorder = true
				}else{
					this.navBorder = false
				}
				switch (true){
					case scrollTop < 10:
						this.navBgColor = 'rgba(255,255,255,0)'
						this.isBlack = false
						this.navBorder = false
						break;
					case scrollTop < 20:
						this.navBgColor = 'rgba(255,255,255,0.1)'
						this.isBlack = false
						break;
					case scrollTop < 40:
						this.navBgColor = 'rgba(255,255,255,0.2)'
						this.isBlack = false
						break;
					case scrollTop < 80:
						this.navBgColor = 'rgba(255,255,255,0.4)'
						this.isBlack = true
						break;
					case scrollTop < 120:
						this.navBgColor = 'rgba(255,255,255,0.6)'
						this.isBlack = true
						break;
					case scrollTop < 150:
						this.navBgColor = 'rgba(255,255,255,0.7)'
						this.isBlack = true
						break;
					case scrollTop < 200:
						this.navBgColor = 'rgba(255,255,255,0.8)'
						this.isBlack = true
						break;
					case scrollTop > 300:
						this.navBgColor = 'rgba(255,255,255,1)'
						this.isBlack = true
						break;
				}
			}
		}
	}
</script>

<style lang="scss">
	.container{
		background-color: #02001A;
		background-image: url("~@/public/images/expert/num_bg.png");
		background-position: 0 -40rpx;
		background-size: 100%;
		background-repeat: no-repeat;
		min-height: var(--safe-height);
		.ch-nav{
			.left{
				margin-left: 20rpx;
			}
		}
		.foot{
			&.full-screen{
				z-index: 997;
				display: flex;
				flex-direction: column-reverse;
				overflow-x: scroll;
				height: var(--window-height);
				.post-foot{
					margin-top: 126rpx;
					position: unset;
				}
			}
		}
	}
	.body{
		padding: 20rpx;
		padding-bottom: calc(200rpx + var(--safe-area-inset-bottom));
		.card{
			background: #FFFFFF;
			border-radius: 10rpx;
			.title-img{
				width: 100%;
			}
		}
		.expert{
			padding: 30rpx;
			.expert-avatar{
				position: relative;
				align-items: center;
				.image{
					width: 88rpx;
					height: 88rpx;
				}
				button{
					position: absolute;
					top: 68rpx;
					width: 88rpx;
					font-size: 22rpx;
					color: #FFFFFF;
					line-height: 40rpx;
					background: #0055FF;
					border-radius: 20rpx;
					margin: 0;
					padding: 0;
					border: none;
					&.fav{
						line-height: 36rpx;
						background: #FFFFFF;
						border: 2rpx solid #0055FF;
						color: #0055FF;
						box-sizing: border-box;
					}
					&.nochat{
						border-color: #99BBFF;
						color: #99BBFF;
					}
				}
			}
			.expert-info{
				flex: 2;
				margin-left: 20rpx;
				.info-top{
					align-items: center;
					justify-content: space-between;
					.info-top-name{
						align-items: center;
						font-size: 30rpx;
						font-weight: 500;
						image{
							margin-left: 8rpx;
							width: 24rpx;
							height: 24rpx;
						}
					}
					.info-top-tag{
						margin-top: 12rpx;
						text:first-child{
							margin-left: 0;
						}
					}
				}
				.info-remark, .info-season{
					margin-top: 20rpx;
					font-size: 22rpx;
					color: #999999;
					line-height: 40rpx;
				}
				.info-season{
					color: #666666;
					line-height: 1;
				}
			}
		}
		.rights{
			margin-top: 20rpx;
			.rights-list{
				padding: 30rpx 0;
				.list-item{
					flex: 2;
					.item-icon{
						width: 88rpx;
						height: 88rpx;
					}
					.item-title{
						margin-top: 20rpx;
						font-size: 24rpx;
						font-weight: bold;
						color: #070066;
					}
					.item-desc{
						margin-top: 12rpx;
						text-align: center;
						font-size: 20rpx;
						line-height: 24rpx;
						color: #070066;
					}
					.color-yellow{
						color: #FF9C00;
						font-weight: bold;
					}
				}
			}
		}
		.cardlist{
			margin-top: 20rpx;
			padding-bottom: 30rpx;
			.numcard{
				align-items: center;
				.card-title{
					padding: 0 20rpx;
					margin-top: 30rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: #0A0099;
				}
				.card-price{
					align-items: center;
					margin-top: 18rpx;
					font-size: 22rpx;
					.color-red{
						font-size: 30rpx;
						font-weight: bold;
						margin-right: 8rpx;
					}
				}
				.card-list{
					margin-top: 20rpx;
					padding: 0 20rpx;
					box-sizing: border-box;
					align-items: center;
					justify-content: space-between;
					.card-detail{
						width: 210rpx;
						margin-right: 20rpx;
						align-items: center;
						border-radius: 10rpx;
						position: relative;
						background: linear-gradient(90deg, #E5EEFF 0%, #EFE5FF 99%);
						.card-nums{
							height: 60rpx;
							line-height: 60rpx;
							font-size: 28rpx;
							font-weight: 500;
							color: #0A0099;
						}
						.card-info{
							align-items: center;
							justify-content: center;
							margin: 0 8rpx 8rpx;
							width: 194rpx;
							height: 174rpx;
							background: #FFFFFF;
							border-radius: 10rpx;
							box-sizing: border-box;
							position: relative;
							.color-red{
								font-size: 36rpx;
								font-family: Roboto;
								font-weight: 500;
							}
							.color-black{
								margin-top: 15rpx;
								font-size: 20rpx;
							}
							.color-grey{
								margin-top: 10rpx;
								font-size: 20rpx;
							}
							.discount{
								padding: 0 17rpx;
								height: 30rpx;
								background: #F23030;
								border-radius: 10rpx 0 10rpx 0;
								font-size: 20rpx;
								line-height: 30rpx;
								color: #FFFFFF;
								position: absolute;
								top: 0;
								left: 0;
							}
						}
						.select-icon{
							width: 40rpx;
							height: 40rpx;
							position: absolute;
							top: 0;
							right: 0;
						}
						&.active{
							background: linear-gradient(90deg, #BFD6FF 0%, #D8BFFF 100%);
							.card-nums{
								color: #1100FF;
							}
						}
					}
					.card-detail:last-child{
						margin-right: 0;
					}
				}
			}
		}
	}
	.foot{
		//touch-action: none;
		.post-foot{
			max-width: $max-width;
			margin: $pc-margin;
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: #FFFFFF;
			//z-index: 5;
			.agreement{
				height: 60rpx;
				align-items: center;
				font-size: 24rpx;
				line-height: 1;
				border-bottom: 1rpx solid #ededed;
				box-sizing: border-box;
				padding: 0 20rpx;
				.radio{
					width: 32rpx;
					height: 32rpx;
				}
				.color-grey{
					margin-left: 20rpx;
				}
			}
			.pay-box{
				height: 120rpx;
				align-items: center;
				justify-content: space-between;
				line-height: 1;
				padding: 0 20rpx;
				.pay-price{
					align-items: flex-end;
					.price{
						margin: 0 8rpx;
						font-size: 48rpx;
						font-weight: bold;
						line-height: 0.9;
					}
				}
				.pay-btn{
					padding: 0;
					margin: 0;
					border: none;
					width: 240rpx;
					height: 88rpx;
					background: #0055FF;
					border-radius: 44rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #FFFFFE;
					line-height: 88rpx;
					box-sizing: border-box;
				}
			}
			&.radius{
				border-radius: 20rpx 20rpx 0 0;
			}
		}
		.post-foot-pay, .post-foot-password, .post-foot-result{
			.pay-head{
				padding: 30rpx 20rpx;
				border-bottom: 1rpx solid #EDEDED;
				align-items: center;
				justify-content: space-between;
				font-size: 36rpx;
				font-weight: 600;
				line-height: 36rpx;
				.des{
					width: 100rpx;
					font-weight: 400;
					font-size: 32rpx;
					line-height: 32rpx;
				}
				.des:last-child{
					text-align: right;
					image{
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
			.pay-body{
				align-items: center;
				.pay-body-des{
					text-align: center;
					margin-top: 60rpx;
					font-size: 28rpx;
					line-height: 28rpx;
					.btn{
						margin-left: 20rpx;
					}
					&.mt30{
						margin-top: 30rpx;
						line-height: 1;
						.color-red{
							margin-right: 4rpx;
						}
					}
				}
				.pay-body-price{
					margin-top: 80rpx;
					align-items: flex-end;
					.price{
						margin-right: 15rpx;
						font-size: 72rpx;
						font-weight: 800;
						color: #F23030;
						line-height: 56rpx;
					}
					.chd{
						width: 36rpx;
						height: 36rpx;
					}
					text{
						font-size: 30rpx;
						line-height: 30rpx;
					}
				}
				.pay-body-del{
					margin-top: 20rpx;
					font-size: 24rpx;
					text-decoration: line-through;
					color: #B3B3B3;
					line-height: 24rpx;
				}
				.pay-body-coupon{
					width: 100%;
					margin-top: 110rpx;
					align-items: center;
					justify-content: space-between;
					.coupon-des{
						margin-left: 30rpx;
						font-size: 30rpx;
						line-height: 30rpx;
						font-weight: 500;
						flex: 2;
					}
					.coupon-info{
						font-size: 26rpx;
						line-height: 26rpx;
						color: #999999;
					}
					.coupon-icon{
						margin: 0 30rpx 0 10rpx;
						line-height: 28rpx;
					}
					navigator{
						line-height: 26rpx;
						&.navigator-hover{
							background-color: #fff;
						}
					}
				}
				.pay-body-agreement{
					margin-top: 40rpx;
					padding: 0 20rpx 25rpx;
					align-items: center;
					align-self: flex-start;
					font-size: 24rpx;
					line-height: 24rpx;
					.radio{
						width: 32rpx;
						height: 32rpx;
						margin-right: 20rpx;
					}
				}
				.pay-body-result{
					align-items: center;
					margin: 0 20rpx;
					image{
						margin: 100rpx 0 50rpx;
						width: 320rpx;
						height: 200rpx;
					}
					.title{
						font-size: 36rpx;
						font-weight: 500;
						line-height: 36rpx;
					}
					.reson{
						margin: 25rpx 0 80rpx;
						font-size: 26rpx;
						line-height: 26rpx;
						color: #999999;
					}
				}
			}
			.pay-btn, .pay-result-btn{
				margin: 20rpx 20rpx 60rpx;
				button{
					height: 96rpx;
					border: none;
					background: #0055FF;
					border-radius: 48rpx;
					color: #FFFFFF;
					font-size: 32rpx;
					font-weight: 500;
					line-height: 96rpx;
					padding: 0;
					margin: 0;
				}
			}
			.pay-result-btn{
				margin: 20rpx 95rpx 140rpx;
			}
		}
		.post-foot-password{
			.pay-body-password{
				width: 100%;
				margin: 30rpx 0 0;
				.color-blue{
					margin: 30rpx 60rpx 0 0;
					font-size: 28rpx;
					line-height: 28rpx;
					text-align: right;
				}
			}
			.keyboard{
				margin-top: 60rpx;
				width: 100%;
			}
		}
	}
</style>
